﻿@{
    //ViewData["Title"] = "json格式化 | json实体生成 | 字符串在线处理 | 数据库实体生成";
    ViewData["Title"] = "个人技术测试";
    
}

<div id="app">
    <div>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @@select="handleSelect" size="mini">
            <template v-for="item in menus">
                <el-menu-item style="margin-top:-10px" :index="item.id.toString()" @@click="JumpUrl(item)" size="mini">
                    <i :class="item.icon"> </i>
                    <span slot="title"> {{ item.name }}</span>
                </el-menu-item>
            </template>
            <span style="color:#909399;font-size:10px;float:right">
                访问次数:{{visitorLog.visitorTotal}}&nbsp;&nbsp;&nbsp;&nbsp;
                访问总人数：{{visitorLog.visitorTotalPeople}}
                <br />
                <a href="https://www.aliyundrive.com/sign/in" style="float:right" target="_blank">阿里云盘</a>
            </span>
           
        </el-menu>
    </div>
  
    <div style="width: 100%; height: 100%">
        <keep-alive  v-for="item in menus" >
            <iframe ref="iframe" v-show="item.url==url" :src="item.url" style="width: 100%; height: 820px; border: 1px #DBDBDB solid"></iframe>
        </keep-alive>
        @*<iframe ref="iframe" :src="url" style="width: 100%; height: 820px; border: 1px #DBDBDB solid"></iframe>*@
    </div>
</div>

<script>
    var vueApp = undefined;
    var vm = new Vue({
        el: '#app',
        data: function () {
            vueApp = this;
            return {
                visitorLog: {
                    visitorTotal: 0, 
                    visitorTotalPeople:0
                },
                activeIndex: '1',
                menus: [
                    {
                        name: "Json格式化",
                        id: 1,
                        icon: "el-icon-finished",
                        url: "/Tool/JSONFormat",
                        children: []
                    }, {
                        name: "String处理",
                        id: 2,
                        icon: "el-icon-edit",
                        url: "/Tool/StringOperate",
                        children: []
                    },  {
                        name: "ChatGPT",
                        id: 3,
                        icon: "el-icon-edit",
                        url: "/Tool/ChatGPTIM",
                        children: []
                    },{
                        name: "在线分享",
                        id: 4,
                        icon: "el-icon-share",
                        url: "/Tool/OnLineShare",
                        children: []
                    },{
                        name: "资源下载",
                        id: 5,
                        icon: "el-icon-setting",
                        url: "/Tool/FileManage",
                        children: []
                    }
                ],
                url: '/Tool/JSONFormat'
            };
        },
        filters: {

        },
        created() {
            vueApp.GetVisitorLogInfo();
        },
        methods: {
            GetVisitorLogInfo() {
                axios.post('Tool/GetVisitorLogInfo').then(function (response) {
                    vueApp.visitorLog = response.data.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            handleSelect(key, keyPath) {
                //console.log(key, keyPath);
            },
            JumpUrl(row) {
                vueApp.url = row.url;
            }
        }

    });
</script>
